<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
            font-size: 16px;
            margin-top: 10px;
        }

        .box {
            background-color: #202932;
            margin: 50px 200px;
        }

        .f-nav {
            height: 60px;
            overflow: hidden;
            transition: all 1s;
            display: block;
            position: relative;
            padding: 0;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
            background-color: #202932;
        }

        .f-nav li {
            padding: 0;
            margin: 0;
            float: left;
            height: 60px;
            line-height: 60px;
            position: relative;
            z-index: 100;
            display: inline-block;
            list-style-type: none;
            width: 100px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .sideline {
            position: absolute;
            background-color: #208ff9;
            left: 0;
            top: 0;
            color: #fff;
            min-height: 30px;
            z-index: 1;
            height: 60px;
            line-height: 60px;
            display: inline-block;
            list-style-type: none;
            width: 100px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .f-nav li.active {
            background-color: #208ff9;
            color: #fff;
        }

        .f-nav li.fontNav {
            background-color: #208ff9;
            color: #fff;
            animation: fontNav .8s;
        }

        .f-nav li.downNav {
            background-color: #208ff9;
            color: #fff;
            animation: downNav .8s;
        }

        .f-nav li.leftNav {
            background-color: #208ff9;
            color: #fff;
            animation: leftNav .8s;
        }

        .f-nav li.rightNav {
            background-color: #208ff9;
            color: #fff;
            animation: rightNav .8s;
        }

        .f-nav li.edgeLeft {
            background-color: #208ff9;
            color: #fff;
            animation: edgeLeft .8s;
        }

        .f-nav li.edgeRight {
            background-color: #208ff9;
            color: #fff;
            animation: edgeRight .8s;
        }

        .f-nav li.scaleChange {
            background-color: #208ff9;
            color: #fff;
            animation: scaleChange .8s;
        }

        @keyframes scaleChange {
            0% {
                transform: scale(0);
            }

            ,
            50% {
                transform: scale(.5);
            }

            ,
            100% {
                transform: scale(1);
            }
        }

        @keyframes fontNav {
            0% {
                transform: translate(0, -100%);
            }

            ,
            50% {
                transform: translate(0, -50%);
            }

            ,
            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes downNav {
            0% {
                transform: translate(0, 100%);
            }

            ,
            50% {
                transform: translate(0, 50%);
            }

            ,
            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes leftNav {
            0% {
                transform: translate(-100%, 0%);
            }

            ,
            50% {
                transform: translate(-50%, 0%);
            }

            ,
            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes rightNav{
            0% {
                transform: translate(100%, 0%);
            }

            ,
            50% {
                transform: translate(50%, 0%);
            }

            ,
            100% {
                transform: translate(0%, 0);
            }
        }

        @keyframes edgeLeft {
            0% {
                transform: translate(-100%, -100%);
            }

            100% {
                transform: translate(0%, 0%);
            }
        }

        @keyframes edgeRight {
            0% {
                transform: translate(100%, 100%);
            }

            100% {
                transform: translate(0%, 0%);
            }
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <div class="box">
        <ul class="f-nav" id='f-nav'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>
    <script>
        (function ($) {


            var methods = {
                init: function (options) {
                    var $this = $(this)
                    var obj = $(this).data('tooltip').obj


                    if (obj.textList) {
                        $.each(obj.textList, function (index, value) {
                            $this.append('<li>' + index + '</li>')
                        })
                    }


                    if (obj.width) {
                        $this.find('li').css('width', obj.width + 'px')
                        $this.find('.sideline').css('width', obj.width + 'px')
                    }

                    if (obj.height) {
                        $this.css('height', obj.height + 'px')
                        $this.find('li').css('height', obj.height + 'px')
                        $this.find('li').css('line-height', obj.height + 'px')
                        $this.find('.sideline').css('height', obj.height + 'px')
                    }


                    if (obj.default) {
                        $this.find('.sideline').css('left', obj.width ? (obj.default - 1) * obj.width + 'px' : (obj.default - 1) * 100 + 'px')
                    }



                },
                fontUp: function () {
                    // 鐢变笂寰€涓嬫嫋鍔ㄨ鏉�
                    var $this = $(this);
                    $this.find('li').on('click', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'fontNav')
                    }).on('hover', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'fontNav')
                    })
                },
                downUp: function () {
                    var $this = $(this);
                    $this.find('li').on('click', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'downNav')
                    }).on('hover', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'downNav')
                    })

                },
                slideMove: function () {
                    var $this = $(this);
                    var obj = $(this).data('tooltip').obj;
                    $this.find('li').on('click', function () {
                        if (($this.find('.sideline').is(":hidden"))) {
                            $this.find('.sideline').show()
                        }
                        var left = obj.width ? ($(this).index() * obj.width) + 'px' : ($(this).index() * 100) + 'px';
                        $this.find('.sideline').animate({ 'left': left })
                    })

                },
                edgeLeft: function () {
                    var $this = $(this);
                    $this.find('li').on('click', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'edgeLeft')
                    }).on('hover', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'edgeLeft')
                    })
                },
                edgeRight: function () {
                    var $this = $(this);
                    $this.find('li').on('click', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'edgeRight')
                    }).on('hover', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'edgeRight')
                    })
                },
                scaleChange: function () {
                    var $this = $(this);
                    $this.find('li').on('click', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'scaleChange')
                    }).on('hover', function () {
                        $this.find('li').attr('class', '');
                        $this.find('.sideline').hide();
                        this.setAttribute('class', 'scaleChange')
                    })
                }

            };

            $.fn.tooltip = function (method) {
                if (methods[method]) {
                    // 涓嶄紶鍙傛暟
                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === 'object' || !method) {
                    //   浼犲璞″弬鏁�
                    if (method.type) {
                        var $this = $(this);
                        // 瀛樺偍鍙傛暟
                        $(this).data('tooltip', {
                            target: $this,
                            obj: method
                        });
                        //  鎵ц鍒濆鏂规硶
                        methods.init.apply(this, arguments);
                        methods[method.type].apply(this, Array.prototype.slice.call(arguments, 1));

                        return method.success ? method.success(this) : null
                    } else {
                        return methods.init.apply(this, arguments);
                    }
                } else {
                    $.error('Method ' + method + ' does not exist on jQuery.tooltip');
                }
            };

        })(jQuery);
    </script>
    <script>
        $('#f-nav').tooltip({
            default: 2,       // 默认为空  --  选中默认值
            width: '200',     // 限制宽度
            height: '100',
            // textList: ['首页','分页1','分页2','分页3', '分页4'],   // 每个导航的内容
            type: 'slideMove',  // 必填, 选择内容
            success: function (ret) {

            }   //初始化回调
        });
        $('#f-nav2').tooltip({
            default: 3,
            type: 'fontUp',
            width: '150',
        });

    </script>
</body>

</html>